<template>
  <div class="app-container">
    <el-container class="address-el-container">
      <el-aside width="200px" class="address-tree">
        <div class="search-type">
          <el-popover :content="allChildEmployee" width="100" placement="top-start" trigger="hover">
            <el-switch
              slot="reference"
              v-model="allChildEmployee"
              inactive-color="#13ce66"
              active-value="所有岗位/员工"
              inactive-value="直接岗位/员工"
              @change="switchChange"/>
          </el-popover>
          <el-popover :content="withPost" width="100" placement="top-start" trigger="hover">
            <el-switch
              slot="reference"
              v-model="withPost"
              inactive-color="#13ce66"
              active-value="带岗位"
              inactive-value="不带岗位"
              @change="switchChange"/>
          </el-popover>
        </div>
        <el-tree
          v-loading="treeLoading"
          :data="frameworkData"
          :props="defaulfProp"
          :default-expanded-keys="[frameworkData[0].id]"
          :expand-on-click-node="false"
          accordion
          node-key="id"
          @node-click="handleNodeClick"/>
      </el-aside>
      <el-main>
        <el-table
          v-loading="postLoading"
          v-if="withPost.indexOf('不带') === -1"
          :data="postList"
          fit
          highlight-current-row
          @row-click="rowClick">
          <el-table-column align="center" label="岗位名称" prop="stext" min-width="200"/>
          <el-table-column align="center" label="对象ID" prop="objid" min-width="100"/>
          <el-table-column align="center" label="公司" prop="client" min-width="100"/>
          <el-table-column align="center" label="是否可用" min-width="100">
            <template slot-scope="scope"><span>{{ scope.row.available? '可用' : '不可用' }}</span></template>
          </el-table-column>
          <el-table-column align="center" label="来源" prop="source" min-width="80"/>
          <el-table-column align="center" label="开始日期" prop="begda" min-width="100"/>
        </el-table>
        <el-table
          v-loading="empLoading"
          v-else
          :data="employees"
          row-key="code"
          fit
          highlight-current-row>
          <el-table-column align="center" label="员工ID" prop="objid" min-width="90"/>
          <el-table-column align="center" label="名字" prop="stext" min-width="80"/>
          <el-table-column align="center" label="用户名" prop="username" min-width="80"/>
          <el-table-column align="center" label="部门" width="90">
            <template slot-scope="scope"><span>{{ scope.row.department }}</span></template>
          </el-table-column><!--用于数据驱动表格切换，不能删除-->
          <el-table-column align="center" label="邮箱" prop="email" min-width="90"/>
          <el-table-column align="center" label="手机" prop="phone" min-width="90"/>
          <el-table-column align="center" label="手机短号" prop="telephone_short" min-width="110"/>
          <el-table-column align="center" label="座机" prop="telephone" min-width="110"/>
          <el-table-column align="center" label="业务" prop="business_service1" min-width="110"/>
          <el-table-column align="center" label="证件照" prop="identification_photo" min-width="110"/>
          <el-table-column align="center" label="用工性质" prop="emp_nature" min-width="110"/>
          <el-table-column align="center" label="百分比" prop="vprozt" min-width="80"/>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog :visible.sync="empVisible" center title="岗位人员信息" width="1200px">
      <el-table
        v-loading="empLoading"
        :data="employees"
        fit
        highlight-current-row>
        <el-table-column align="center" label="员工ID" prop="objid" min-width="90"/>
        <el-table-column align="center" label="名字" prop="stext" min-width="80"/>
        <el-table-column align="center" label="用户名" prop="username" min-width="80"/>
        <el-table-column align="center" label="部门" width="90">
          <template slot-scope="scope"><span>{{ scope.row.department }}</span></template>
        </el-table-column><!--用于数据驱动表格切换，不能删除-->
        <el-table-column align="center" label="邮箱" prop="email" min-width="90"/>
        <el-table-column align="center" label="手机" prop="phone" min-width="90"/>
        <el-table-column align="center" label="手机短号" prop="telephone_short" min-width="110"/>
        <el-table-column align="center" label="座机" prop="telephone" min-width="110"/>
        <el-table-column align="center" label="业务" prop="business_service1" min-width="110"/>
        <el-table-column align="center" label="证件照" prop="identification_photo" min-width="110"/>
        <el-table-column align="center" label="用工性质" prop="emp_nature" min-width="110"/>
        <el-table-column align="center" label="百分比" prop="vprozt" min-width="80"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import commonApi from '@/api/commonApi'
import Sortable from 'sortablejs'
export default {
  name: 'AddressBook',
  data() {
    return {
      treeLoading: false,
      postLoading: false,
      empVisible: false,
      empLoading: false,
      employees: [],
      frameworkData: [{ id: null, objec: { stext: '' }}], // 需要初始化
      allChildEmployee: '直接岗位/员工',
      withPost: '不带岗位',
      postList: [],
      defaulfProp: {
        children: 'nodes',
        label: function(data) {
          return data.objec.stext
        }
      },
      nodeData: {}, // 点击节点数据
      sortable: null,
      oldList: [],
      newList: []
    }
  },
  created() {
    this.getFrameworkTree()
  },
  methods: {
    rowClick(row) { // 点击行 触发
      this.empVisible = true
      this.getEmployeeFromPost(row)
    },
    getFrameworkTree() { // 组织机构树
      this.treeLoading = true
      commonApi('/organization/tree', 'get').then(response => {
        if (response.code === 1) {
          this.frameworkData = response.data
          this.nodeData = this.frameworkData[0].nodes[0]
          if (this.withPost.indexOf('不带') !== -1) {
            this.getDirectEmployeesFromOrganization(this.frameworkData[0].nodes[0].objid)
          } else {
            this.getFrameworkDirectPost(this.frameworkData[0].nodes[0].objid)
          }
        }
        this.treeLoading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    switchChange() {
      this.handleNodeClick(this.nodeData)
    },
    handleNodeClick(data, node) { // 点击节点触发事件
      this.nodeData = data
      if (this.withPost.indexOf('不带') !== -1) {
        if (this.allChildEmployee.indexOf('直接') !== -1) {
          this.getDirectEmployeesFromOrganization(data.objid)
        } else {
          this.getAllEmployeesFromOrganization(data.objid)
        }
      } else {
        this.sortable.destroy()
        if (this.allChildEmployee.indexOf('直接') !== -1) {
          this.getFrameworkDirectPost(data.objid)
        } else {
          this.getFrameworkAllPost(data.objid)
        }
      }
    },
    getFrameworkDirectPost(objId) { // 获取组织结构直接岗位
      this.postLoading = true
      commonApi(`/organization/queryDirectPositionByOrganization/${objId}`, 'get').then(response => {
        if (response.code === 1) {
          this.postList = response.data
        }
        this.postLoading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    getFrameworkAllPost(objId) { // 获取组织机构下所有岗位
      this.postLoading = true
      commonApi(`/organization/queryPositionByOrganization/${objId}`, 'get').then(response => {
        if (response.code === 1) {
          this.postList = response.data
        }
        this.postLoading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    getEmployeeFromPost(post) { // 从岗位中获取员工
      this.empLoading = true
      commonApi(`/organization/queryPersonByPosition/${post.objid}`, 'get').then(response => {
        if (response.code === 1) {
          this.employees = response.data
        }
        this.empLoading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    getAllEmployeesFromOrganization(objid) { // 从机构中获取所有员工
      this.empLoading = true
      commonApi(`/organization/queryPersonByOrganization/${objid}`, 'get').then(response => {
        if (response.code === 1) {
          this.employees = response.data
          this.oldList = this.employees.map(v => v.code)
          this.newList = this.oldList.slice()
          this.$nextTick(() => {
            this.setSort()
          })
        }
        this.empLoading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    getDirectEmployeesFromOrganization(objid) { // 从机构中获取直接员工
      this.empLoading = true
      commonApi(`/person/queryDirectPersonByOrganization/${objid}`, 'get').then(response => {
        if (response.code === 1) {
          this.employees = response.data
          this.oldList = this.employees.map(v => v.code)
          this.newList = this.oldList.slice()
          console.log(this.oldList)
          this.$nextTick(() => {
            this.setSort()
          })
        }
        this.empLoading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    setSort() {
      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          dataTransfer.setData('Text', '')
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
        },
        onEnd: evt => {
          console.log(evt.oldIndex + '' + evt.newIndex)
          const targetRow = this.employees.splice(evt.oldIndex, 1)[0]
          this.employees.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)

          this.dataSortChange(this.newList)
        }
      })
    },
    dataSortChange(newList) {
      commonApi('/organization/sortOrganization', 'post', newList).then(response => {
        if (response.code === 1) {
          // this.getDirectEmployeesFromOrganization(80000008)
        }
      })
    }
  }
}
</script>

<style>
  .sortable-ghost{
    opacity: .8;
    color: #fff!important;
    background: #42b983!important;
  }
</style>
<style scoped>
  .address-el-container{
    min-height: calc(100vh - 90px);
  }
  .address-tree{
    background-color: white;
    margin-right: 10px;
    padding: 10px;
  }
  .search-type{
    margin: 20px;
    display: flex;
    justify-content: space-around;
  }
</style>
